<!DOCTYPE html>
<html lang="zh">
<head>
  <#assign title="角色管理">
  <#include "/head.html">
</head>
  
<body>
  
  <div class="row">
    
    <div class="col-lg-12">
        <div class="card-body bg-white">
          
          <form id="submitForm" action="system/role/saveRules" method="post">
            <input type="hidden" name="id" value="${role.id}">
          
            <div class="form-group">
              <label for="example-text-input">角色名称</label>
              <input class="form-control" type="text" value="${role.description}" readonly>
            </div>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all">全选</label>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                
                  <#list menuList as menu><!-- 一级菜单 -->
            
		              
		            <tr>
	                  <td>
	                    <div class="custom-control custom-checkbox">
	                      <input type="checkbox" name="rules" class="custom-control-input checkbox-parent" id="roleid-${menu.id}" dataid="id-${menu.id}" value="${menu.permissionValue}" <#if role.rules?seq_contains(menu.permissionValue)>checked</#if>>
	                      <label class="custom-control-label" for="roleid-${menu.id}">${menu.name}</label>
	                    </div>
	                  </td>
	                </tr>
	                
	                <#if menu.submenus?size gt 0>
	                
	                  <#assign type2="${menu.submenus[0].type}">
	                  
	                  <#if type2 == 'MENU'>
	                  
	                    <#list menu.submenus as submenu2><!-- 二级菜单 -->
	                    
	                      <tr>
			                <td class="p-l-20">
			                  <div class="custom-control custom-checkbox">
			                    <input type="checkbox" name="rules" class="custom-control-input checkbox-child" id="roleid-${menu.id}-${submenu2.id}" dataid="id-${menu.id}-${submenu2.id}" value="${submenu2.permissionValue}" <#if role.rules?seq_contains(submenu2.permissionValue)>checked</#if>>
			                    <label class="custom-control-label" for="roleid-${menu.id}-${submenu2.id}">${submenu2.name}</label>
			                  </div>
			                </td>
			              </tr>
			              
			              <#if submenu2.submenus?size gt 0>
			              
			                <#assign type3="${submenu2.submenus[0].type}">
			                
			                <#if type3 == 'MENU'>
			                
			                  <#list submenu2.submenus as submenu3><!-- 三级菜单 -->
			                  
			                    <tr>
					              <td class="p-l-40">
					                <div class="custom-control custom-checkbox">
					                  <input type="checkbox" name="rules" class="custom-control-input checkbox-child" id="roleid-${menu.id}-${submenu2.id}-${submenu3.id}" dataid="id-${menu.id}-${submenu2.id}-${submenu3.id}" value="${submenu3.permissionValue}" <#if role.rules?seq_contains(submenu3.permissionValue)>checked</#if>>
				                      <label class="custom-control-label" for="roleid-${menu.id}-${submenu2.id}-${submenu3.id}">${submenu3.name}</label>
					                </div>
					              </td>
					            </tr>
					            
					            <#if submenu3.submenus?size gt 0>
					            
					              <tr>
						            <td style="padding-left: 60px;">
						                      
						              <#list submenu3.submenus as submenu4><!-- 四级按钮 -->
						                      
							            <div class="custom-control custom-checkbox custom-control-inline">
							              <input type="checkbox" name="rules" class="custom-control-input checkbox-child" id="roleid-${menu.id}-${submenu2.id}-${submenu3.id}-${submenu4.id}" dataid="id-${menu.id}-${submenu2.id}-${submenu3.id}-${submenu4.id}" value="${submenu4.permissionValue}" <#if role.rules?seq_contains(submenu4.permissionValue)>checked</#if>>
						                  <label class="custom-control-label" for="roleid-${menu.id}-${submenu2.id}-${submenu3.id}-${submenu4.id}">${submenu4.name}</label>
							            </div>
						                      
						              </#list>
						                      
						            </td>
						          </tr>
					            
					            </#if>
			                  
			                  </#list>
			                
			                <#else>
			                
			                  <tr>
				                <td class="p-l-40">
				                      
				                  <#list submenu2.submenus as submenu3><!-- 三级按钮 -->
				                      
					                <div class="custom-control custom-checkbox custom-control-inline">
					                  <input type="checkbox" name="rules" class="custom-control-input checkbox-child" id="roleid-${menu.id}-${submenu2.id}-${submenu3.id}" dataid="id-${menu.id}-${submenu2.id}-${submenu3.id}" value="${submenu3.permissionValue}" <#if role.rules?seq_contains(submenu3.permissionValue)>checked</#if>>
				                      <label class="custom-control-label" for="roleid-${menu.id}-${submenu2.id}-${submenu3.id}">${submenu3.name}</label>
					                </div>
				                      
				                  </#list>
				                      
				                </td>
				              </tr>
			                
			                </#if>
			              
			              </#if>
	                    
	                    </#list>
	                  
	                  <#else>
	                  
	                    <tr>
		                  <td class="p-l-20">
		                      
		                    <#list menu.submenus as submenu2><!-- 二级按钮 -->
		                      
			                  <div class="custom-control custom-checkbox custom-control-inline">
			                    <input type="checkbox" name="rules" class="custom-control-input checkbox-child" id="roleid-${menu.id}-${submenu2.id}" dataid="id-${menu.id}-${submenu2.id}" value="${submenu2.permissionValue}" <#if role.rules?seq_contains(submenu2.permissionValue)>checked</#if>>
			                    <label class="custom-control-label" for="roleid-${menu.id}-${submenu2.id}">${submenu2.name}</label>
			                  </div>
		                      
		                    </#list>
		                      
		                  </td>
		                </tr>
	                  
	                  </#if>
	                  
	                </#if>
	                  
	              </#list>
		                
                </tbody>
              </table>
            </div>
          </form>
          
        </div>
    </div>
        
  </div>
  

<#include "/footer.html">

<script type="text/javascript">
$(function(){
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function(){
/*         var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked')); */
        
        checkAll();
    });
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }
        
        checkAll();
    });
    
    checkAll();
});

/*全选*/
function checkAll() {
	if ($('input[name=rules]:not(:checked)').length == 0) {
    	$('#check-all').prop('checked', true);
    } else {
    	$('#check-all').prop('checked', false);
    }
}
</script>
</body>
</html>